<template>
	<gui-page ref="guiPage" :customHeader="true">
		<!-- 导航 -->
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.scanRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view v-if="data.barcodeList.length==0" class="noticeHooks">
				{{data.barcodeList.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without')}}
			</view>
			<view class="distributed" v-else>
				<view class="record-card" v-for="(item, index) in data.barcodeList" :key="`${item.barcode}` + `${index}`" >
					<uni-icons class="close-icons" type="closeempty" color="#9C9C9C" size="30"
						@click="handelClosePopup(index, item)"></uni-icons>
					<view class="card-mini-head">
						<view class="title-line"></view>
						<text>{{ $t('translationImage.serialNumber') }}：{{ data.barcodeList.length-index}}</text>
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('Common.tipperTray') }}：</text>{{item.tipperTray}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('Common.woodenPallet') }}：</text>{{item.barcode}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{item.materialName}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialCode')
						}}：</text>{{item.materialCode}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{item.materialSpec}}
					</view>
					
					<view class="custom-card-itemOne">
						
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('distributedEnter.qty')
							}}：</text>{{item.currentQty}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{item.unit}}
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { navigate } from '@/utils/routerSkip.js';
import { useStore } from "vuex";
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_DEL, OPERATION_LOOK } from '@/constant/index.js'
import {
	ref,
	reactive,
	onMounted,
	watch,
	computed,
	toRaw
} from 'vue';

let data = reactive({
	barcodeList: [],//条码数组
})

let store = useStore();

data.barcodeList = computed(() => {
	console.log(store.state.palletTrayList,'data.barcodeList')
	return store.state.trayCalibrate
})

const handelClosePopup = (index, item) => {
	store.commit('deleteTrayCalibrateList', index)
}

</script>

<style scoped></style>